
export function RotateTextCss(){
    return (
        <div className={'p-5 h-screen bg-black flex items-center w-1/2 group'}>
            <div className={'size-72 font-mono rounded-full text-white text-4xl'}>
                <ul className={'size-full rounded-full bg-slate-600 relative animate-spin animate-duration-5 group-hover:animate-paused'}>
                    <li className={'size-fit absolute inset-0 m-auto transform-ry-0'}>r</li>
                    <li className={'size-fit absolute inset-0 m-auto transform-ry-1'}>o</li>
                    <li className={'size-fit absolute inset-0 m-auto transform-ry-2'}>t</li>
                    <li className={'size-fit absolute inset-0 m-auto transform-ry-3'}>a</li>
                    <li className={'size-fit absolute inset-0 m-auto transform-ry-4'}>t</li>
                    <li className={'size-fit absolute inset-0 m-auto transform-ry-5'}>e</li>
                    <li className={'size-fit absolute inset-0 m-auto transform-ry-6'}>.</li>
                    <li className={'size-fit absolute inset-0 m-auto transform-ry-7'}>t</li>
                    <li className={'size-fit absolute inset-0 m-auto transform-ry-8'}>e</li>
                    <li className={'size-fit absolute inset-0 m-auto transform-ry-9'}>x</li>
                    <li className={'size-fit absolute inset-0 m-auto transform-ry-10'}>t</li>
                    <li className={'size-fit absolute inset-0 m-auto transform-ry-11'}></li>
                </ul>
            </div>
        </div>
    )
}
